import React from "react";
import Header from "@/components/Header";
import List from "@/components/List";
import Footer from "@/components/Footer";
import "./App.less";
import { reqTodoList } from "@/api";
import { useState, useEffect } from "react";
import { getTodo, setTodo } from "./util/todoStorage";
export default function App() {
  //初始化一个state状态 专门用来保存请求回来的列表数据
  const [todoList, setTodoList] = useState(getTodo() || []);
  // 方法一
  // //初始化请求数据
  // useEffect(() => {
  //   async function getTodoList() {
  //     const result = await reqTodoList();
  //     setTodoList(result.data);
  //   }
  //   getTodoList();
  // }, []);

  //
  //方法二
  // 数据: 初始化一个state状态 专门用来保存请求回来的列表数据

  const getTodoList = async () => {
    const result = await reqTodoList();
    setTodoList(result.data);
  };
  useEffect(() => {
    // todoList.length === 0 || getTodoList();
    // getTodoList();
    //
    // if (todoList.length === 0) {
    //   getTodoList();
    // }
    //
    todoList.length === 0 && getTodoList();
  }, []);

  //一上来就先执行setTodo  然后只要todo发生变化 就会再次执行这个回到函数
  useEffect(() => {
    setTodo(todoList);
  }, [todoList]);
  //修改todo列表中单个的选中状态
  const changeSingleType = (id, newType) => {
    //修改状态 一定要得到一个新的数据 然后使用setXXX方法

    const newTodoList = todoList.map((item) => {
      //遍历数组 判断当前的id和被修改的id是否一致
      return item.id === id ? { ...item, done: newType } : item;
      //响应式修改状态
    });
    setTodoList(newTodoList);
  };

  //删除todo列表某个项目
  const deleteSingle = (index) => {
    /* 
    删除数组的值
    1.删除单个splice 或者 filter
    2.删除多个 filter
    注意 splice修改原数组 filter是返回新数组
    */
    todoList.splice(index, 1);
    setTodoList([...todoList]);
  };

  //

  //添加新的todo
  const addNewTodo = (newTodo) => {
    setTodoList([newTodo, ...todoList]);
  };

  //

  //修改所有数据的状态
  const changeAllChecked = (type) => {
    // todoList.forEach((item) => {
    //   item.done = type;
    // });必须使用setXxx修改
    const newTodoList = todoList.map((item) => {
      return { ...item, done: type };
    });
    setTodoList(newTodoList);
  };

  //
  //删除所有已完成
  const deleteAllComplete = () => {
    const result = todoList.filter((item) => !item.done);
    setTodoList(result);
  };

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header addNewTodo={addNewTodo} />
        <List
          todoList={todoList}
          changeSingleType={changeSingleType}
          deleteSingle={deleteSingle}
        />
        <Footer
          todoList={todoList}
          changeAllChecked={changeAllChecked}
          deleteAllComplete={deleteAllComplete}
        />
      </div>
    </div>
  );
}
